<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="">

    <button>请求</button>




    <!-- https://qw6yvxtrrf.re.qweatherapi.com  服务器地址里面可以有很多接口 那么我们现在要请求的是其中一个接口 -->

    <!-- 域名 需要购买的 -->
     <!-- 192.168.22.34  你买了一个服务器 就会给你一个ip 别人在任意地点 只要连上互联网  就访问到你的ip 至于ip'上挂载什么网站就是你的自由了 -->
    <!-- ip 大家不好记 所以想让你的网站能被更多人记住 访问 就要 域名 例如域名www.baidu.com -->
     <!-- 域名需要 配置和你的ip连接上 这样既可以ip  访问  也可以通过域名访问 -->

    <script>
        let inp = document.querySelector("input")
        let btn = document.querySelector("button")
        btn.onclick = function(){
            // 挂载key
            // 一个是发送给他key
            // 一个是挂载在请求头上
            let xhr = new XMLHttpRequest()
            xhr.open('get',`https://qw6yvxtrrf.re.qweatherapi.com/geo/v2/city/lookup?location=${inp.value}&key=d763df9f84c543bd868115c8a02bac8b`)
            // 上面这一行代码  我们给后端发送了两个值  一个叫location ,另一个叫key
            // 注意上面这种只能用于get请求
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

            xhr.send();//发送  //get时send里面可以不填值在地址直接拼接就可以  但是要调用方法

            xhr.onreadystatechange=function(){
                if(xhr.readyState == 4){
                    console.log(JSON.parse(xhr.responseText));//默认返回的是字符串  需要我们转换为数组
                    // xhr.responseText
                    
                }
            }


        }


    </script>
</body>
</html>